<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="true" @scroll="scroll" :refresher-enabled="true">
    <template #top>
      <u-navbar
        back-text=""
        title="消息中心"
        :background="{ backgroundColor: !isScroll ? '#F4F6F8' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <view class="flex flex-col gap-4 p-4">
      <view class="flex gap-3" @click="d?.system?.num ? vk.navigateTo('/pages/my/system') : ''">
        <view class="size-[48px] relative">
          <view class="size-full overflow-hidden rounded-full">
            <image src="/static/icon_message_mix@3x.png" v-if="!d?.system?.num" class="size-full" mode="scaleToFill" />
          </view>
          <view
            v-if="d?.system?.num"
            class="bg-[#FE2C55] border-[1px] border-solid border-[#FFFFFF] px-1 py-[1px] rounded-full flex justify-center items-center absolute right-0 top-0"
          >
            <view class="text-[11px] text-white leading-none">{{ d?.system?.num }}</view>
          </view>
        </view>
        <view class="flex flex-col justify-around" v-if="!d?.system?.num">
          <view class="font-bold text-[15px] text-[#161A24]"> 系统消息 </view>
          <view class="text-[13px] text-[#5C6068]"> 暂无最新消息 </view>
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false,
        d: {}
      }
    },
    onLoad() {},
    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        let res = await api.getMessageCount({ page, limit })
        if (!res.code) return
        this.d = res.data
        console.log('res==> ', res.data)
        this.$refs.paging.complete([1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
